<template>
  <view>

    <view class="uni-list">
      <block v-for="(value, index) in listData" :key="index">
      <view class="banner" @click="goDetail(value)" v-if="index===0">
        <uniImage class="banner-img" :src="value.pic"></uniImage>
        <view class="banner-title">{{ value.title }}</view>
      </view>

        <view v-else class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
          <view class="uni-media-list">
            <uniImage class="uni-media-list-logo" :src="value.pic"></uniImage>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">{{ value.title }}</view>
              <view class="uni-media-list-text-bottom">
                <text>{{ value.fTitle }}</text>
                <text>{{ value.update }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="ad-view" v-if="(index > 0 && (index+1) % 10 == 0)">
          <ad :adpid="adpid" @error="aderror"></ad>
        </view>
        <!-- #endif -->
      </block>
    </view>
    <uni-load-more :status="status" :icon-size="16" :content-text="contentText"  />
  </view>
</template>

<script>
import { dateUtils } from  '@/utils/util.js';
import {getNewsList} from "../../models/news";
export default {
  data() {
    return {
      banner: {},
      listData: [],
      last_id: '',
      reload: false,
      status: 'more',
      adpid: '',
      contentText: {
        contentdown: '上拉加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      },

      lastPage:false,
      currentPage:1,
      pageSize:10
    };
  },

  onLoad() {
    this.adpid = this.$adpid;
    this.getBanner();
    this.getList();
  },
  /**
   *  下拉下，用于刷新页面
   */
  onPullDownRefresh() {
    this.reload = true;
    this.last_id = '';
    this.getBanner();
    this.getList();
  },
  /**
   * 滚动页面用于下一页
   */
  onReachBottom() {
    this.status = 'more';
    this.getList();
  },
  methods: {

    getBanner() {
      let data = {
        column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
      };
      uni.request({
        url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
        data: data,
        success: data => {
          uni.stopPullDownRefresh();
          if (data.statusCode == 200) {
            this.banner = data.data;
          }
        },
        fail: (data, code) => {
          console.log('fail' + JSON.stringify(data));
        }
      });
    },

    /**
     * 获取新闻列表
     */
    async getList() {
      if (this.lastPage) {
        this.status = 'no-more';
        return;
      }
      const _this = this
      try {
        this.status = 'loading';
        const params = {};
        const result = await getNewsList(params, this.currentPage, this.pageSize);
        const { records, pages } = result.data.data;

        this.listData = this.listData.concat(records);

        this.reload = false;

        if (this.currentPage < pages) {
          this.currentPage++;
        } else {
          _this.status = 'no-more';
          _this.lastPage = true;
        }
      } catch (error) {
        console.error("Error fetching news list:", error);
        // 处理错误，比如显示错误提示或者记录日志
      }
    },
    goDetail: function(e) {
      // 				if (!/前|刚刚/.test(e.published_at)) {
      // 					e.published_at = dateUtils.format(e.published_at);
      // 				}
      let detail = {
        author_name: e.author_name,
        cover: e.cover,
        id: e.id,
        post_id: e.post_id,
        published_at: e.published_at,
        title: e.title
      };
      uni.navigateTo({
        url: './news-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
      });
    },
    setTime: function(items) {
      var newItems = [];
      items.forEach(e => {
        newItems.push({
          author_name: e.author_name,
          cover: e.cover,
          id: e.id,
          post_id: e.post_id,
          published_at: dateUtils.format(e.published_at),
          title: e.title
        });
      });
      return newItems;
    },
    aderror(e) {
      console.log("aderror: " + JSON.stringify(e.detail));
    }
  }
};
</script>

<style>

/* 图文列表 */
.uni-media-list {
  padding: 22rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  flex-direction: row;
}
.uni-navigate-right.uni-media-list {
  padding-right: 74rpx;
}
.uni-pull-right {
  flex-direction: row-reverse;
}
.uni-pull-right>.uni-media-list-logo {
  margin-right: 0rpx;
  margin-left: 20rpx;
}
.uni-media-list-logo {
  height: 84rpx;
  width: 84rpx;
  margin-right: 20rpx;
}
.uni-media-list-logo image {
  height: 100%;
  width: 100%;
}
.uni-media-list-body {
  height: 84rpx;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
}
.uni-media-list-text-top {
  width: 100%;
  line-height: 36rpx;
  font-size: 30rpx;
}
.uni-media-list-text-bottom {
  width: 100%;
  line-height: 30rpx;
  font-size: 26rpx;
  color: #8f8f94;
}

.banner {
  height: 360rpx;
  overflow: hidden;
  position: relative;
  background-color: #ccc;
}

.banner-img {
  width: 100%;
}

.banner-title {
  max-height: 84rpx;
  overflow: hidden;
  position: absolute;
  left: 30rpx;
  bottom: 30rpx;
  width: 90%;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: white;
  z-index: 11;
}

.uni-media-list-logo {
  width: 180rpx;
  height: 140rpx;
}

.uni-media-list-body {
  height: auto;
  justify-content: space-around;
}

.uni-media-list-text-top {
  height: 74rpx;
  font-size: 28rpx;
  overflow: hidden;
}

.uni-media-list-text-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
